<template>
   <view class="search-container">
    <view class="search-input">
      <u-search
        :show-action="true"
        @search="goSearch"
        @custom="goSearch"
        @clear="onSearchClear"
        @change="onSearchChange"
        height="64rpx"
        :clearabled="true"
        :focus="true"
        v-model="keywords"
        actionText="搜索"
      ></u-search>
    </view>
    <!-- 历史记录 -->
    <view class="search-history" v-if="searchList.length == 0 && historyList.length > 0">
      <view class="search-section-row">
        <view class="section-left">
          <text class="label"></text>
          <text class="section-tit">最近搜索</text>
        </view>
        <view class="section-right">
          <text class="clear-btn" @click="clearHistory">清空</text>
        </view>
      </view>
      <view class="history-list">
        <text class="history-item" 
        v-for="(item, index) in historyList" 
        :key="index"
        @click="goHotkeyword(item.name)"
      >{{item.name}}</text>
      </view>
    </view>
    <!-- 搜索榜单 -->
    <view class="search-rank" v-if="searchList.length == 0">
      <view class="search-section-row">
        <view class="section-left">
          <text class="label"></text>
          <text class="section-tit">热搜记录</text>
        </view>
      </view>
      <view class="rank-list">
        <view class="rank-item" @click="goHotkeyword(item.name)" 
          v-for="(item, index) in hotKeywordsList" 
          :key="index"
        >
          <text class="label" :class="'label' + index">{{index + 1}}</text>
          <text class="name">{{item.name}}</text>
        </view>
      </view>
    </view>
    <!-- 搜索列表 -->
    <view class="search-list" v-if="searchList.length > 0">
      <ConsultList :consultList="searchList" />
      <u-loadmore :status="uploadMoreStatus" />
    </view>
  </view>
</template>

<script>
import ConsultList from '@/components/consult-list/consult-list';
import * as api from '@/api/api';
export default {
  name: "search",
  components: {
    ConsultList
  },
  data() {
    return {
      keywords: '',
      historyList: [], // 历史记录 {name: '流浪'}
      hotKeywordsList: [], // 热词
      searchList: [], // 搜索数据
      currentPage: 1,
      uploadMoreStatus: 'loadmore',
      isLastPage: false
    };
  },
  created() {},
  mounted() {},
  onLoad(e) {
    this.getSearchHistory();
    this.getHotSearchKeywords();
  },
  onShow() {
    let keyword = uni.getStorageSync('search_keyword');
    if (keyword) {
      this.keywords = keyword;
      this.goSearch();
    }
  },
  onHide() {
    let keyword = uni.getStorageSync('search_keyword');
    if (keyword) {
      uni.removeStorageSync('search_keyword');
    }
    this.searchList = [];
  },
  methods: {
    // 获取搜索记录
    getSearchHistory() {
      let searchHistory = uni.getStorageSync('search_history');
      if (searchHistory) {
        this.historyList = searchHistory;
      }
    },
    // 搜索热词
    async getHotSearchKeywords() {
      const {data: res} = await api.getHotSearchKeywords();
      this.hotKeywordsList = res.data;
    },
    // 搜索
    async goSearch() {
      if (!this.keywords) {
        uni.showToast({title: '关键词为空', icon: 'none'});
        return;
      }
      const params = {
        search: this.keywords,
        page: this.currentPage
      };
      const {data: res} = await api.getVideoList(params);
      if (res.code === 1) {
        if (res.data.length < 10) {
          this.isLastPage = true;
          this.uploadMoreStatus = 'nomore';
        }
        // 存储关键词到缓存
        this._saveSearchKeywordsToStorage();
        this.searchList = this.searchList.concat(res.data);
      }
    },
    // 搜索框值变化
    onSearchChange(value) {
      this.timer = this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        if (!value) this.searchList = [];
      }, 400);
    },
    // 搜索框清空
    onSearchClear() {
      this.searchList = [];
    },
    // 热词
    goHotkeyword(keyword) {
      this.keywords = keyword;
      this.goSearch();
    },
    // 清空历史
    clearHistory() {
      uni.showModal({
        title: '提示',
        content: '确定清空?',
        success: res => {
          if (res.confirm) {
            uni.removeStorageSync('search_history');
            this.historyList = [];
          }
        }
      })
    },
    onReachBottom() {
      if (!this.isLastPage && this.searchList.length) {
        this.uploadMoreStatus = 'loading';
        this.currentPage += 1;
        this.goSearch();
      }
    },
    // 存储关键词到缓存
    _saveSearchKeywordsToStorage() {
      let searchHistory = uni.getStorageSync('search_history');
      if (!searchHistory) {
        searchHistory = [];
      }
      let value = {name: this.keywords};
      let findIndex = searchHistory.findIndex(item => {
        return item.name === this.keywords;
      })
      if (findIndex === -1) {
        searchHistory.push(value);
        uni.setStorageSync('search_history', searchHistory);
        this.getSearchHistory();
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.search-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .search-input {
    width: 690rpx;
    padding-top: 20rpx;
  }
  .search-history {
    width: 690rpx;
    margin-top: 30rpx;
    .history-list {
      margin-top: 30rpx;
      display: inline-flex;
      flex-wrap: wrap;
      .history-item {
        display: inline-block;
        font-size: 24rpx;
        color: #999;
        padding: 8rpx 30rpx;
        background-color: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 30rpx;
        margin-bottom: 30rpx;
      }
    }
  }
  .search-rank {
    width: 690rpx;
    margin-top: 30rpx;
    .rank-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 30rpx;
      .rank-item {
        width: 45%;
        margin-bottom: 30rpx;
        display: inline-flex;
        align-items: center;
        .label {
          padding: 4rpx 14rpx;
          background-color: #949292;
          border-radius: 6rpx;
          color: #fff;
          font-size: 24rpx;
          display: inline-block;
        }
        .name {
          flex: 1;
          font-size: 26rpx;
          color: #000;
          margin-left: 8rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .label0 {
          background-color: #f51d12 !important;
        }
        .label1 {
          background-color: #ff6005 !important;
        }
        .label2 {
          background-color: #f9b00c !important;
        }

      }
    }
  }
  .search-list {
    width: 690rpx;
    margin-top: 30rpx;
  }
  .search-section-row {
    width: 690rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .section-left {
      display: inline-flex;
      align-items: center;
      .label {
        width: 8rpx;
        height: 40rpx;
        background-color: #50cc99;
        display: inline-block;
      }
      .section-tit {
        margin-left: 8rpx;
        font-size: 30rpx;
        color: #000;
      }
    }
    .section-right {
      display: inline-block;
      .clear-btn {
        font-size: 24rpx;
        padding: 8rpx 30rpx;
        background-color: #f2f2f2;
        border-radius: 30rpx;
        color: #999;
      }
    }
  }
}
</style>